<template>
  <el-form-item label="现价" :rules="rules" class="common-form-width">
    <div style="display: flex;flex-wrap: nowrap;">
      <el-input v-model="showMinCurrencyPrice">
        <template #append>
          积分
        </template>
      </el-input>
      <div style="width: 10px"></div>
      <el-input v-model="showMinPrice">
        <template #append>
          元
        </template>
      </el-input>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { positiveInteger_0, positiveNumber_decimal$2 } from "@/utils/commonRegexp";

const props = withDefaults(defineProps<{
  modelValue1?: number | null | string, // showMinCurrencyPrice
  modelValue2?: number | null | string, // showMinPrice
}>(), {
  // modelValue1: null,
  // modelValue2: null,
})
const modelValue2Ref = toRef(props, 'modelValue2')

const emits = defineEmits(['update:model-value1', 'update:model-value2'])

const showMinCurrencyPrice = computed({
  get() {
    return props.modelValue1
  },
  set(newValue) {
    emits('update:model-value1', newValue)
  }
})

const showMinPrice = ref()
watch(showMinPrice, (newValue) => {
  emits("update:model-value2", isNaN(Number(newValue)) ? newValue : parseInt((Number(newValue) * 100).toFixed(2).slice(0, -3)))
})
watch(modelValue2Ref, (newValue) => {
  showMinPrice.value = isNaN(Number(newValue)) ? newValue : Number(newValue) / 100
})

onMounted(() => {
  showMinPrice.value = isNaN(Number(modelValue2Ref.value)) ? modelValue2Ref.value : Number(modelValue2Ref.value) / 100
})


const isEmpty = (val: any) => {
  return val === null || val === undefined || val === ''
}

const rules = [{
  required: true,
  trigger: 'blur',
  validator(rule: any, val: any, callback: any) {
    if (isEmpty(props.modelValue1) || isEmpty(props.modelValue2)) {
      callback(new Error('请填写商品价格'))
    } else {
      callback()
    }
  },
}]
</script>

<style scoped lang="scss">
@use "@/components/goodsCenter/styles/common.scss";
</style>
